<template>
	<view class="f32 mb20">
		<view class="word-break df jsb">
			<view>{{ dataIndex }}.{{ itemData.title || '' }}</view>
			<scheduleBtn
				:dailyId="dailyId"
				:journalDetailId="itemData.id"
			></scheduleBtn>
		</view>
		<!--标签-->
		<view class="flex-start flex-wrap">
			<view
				class="tag-view mr10 mt20 rel"
				:class="{ 'tag-view-active': tag.choose }"
				v-for="(tag, tagIndex) in itemData.workContentLabelVOList"
				:key="tagIndex"
				@click.stop="chooseTag(tag)"
			>
				{{ tag.labelName }}
				<view
					class="tag-delete"
					@click.stop="deleteTag(tag)"
					v-if="tag.labelType === 2"
					><image :src="deleteIcon" class="del-img"></image
				></view>
			</view>
			<view class="tag-add g3 mt20 df ac" @click="showInputPopup">
				<uni-icons
					type="plus-filled"
					size="20"
					color="#ffffff"
					style="height: 54rpx; margin-left: -6rpx"
				></uni-icons>
				添加标签
			</view>
		</view>
		<view class="input-bg mt20">
			<view class="pd20 f28">
				<text
					v-if="!showTextInput"
					class="text-area word-break"
					@tap="clickToEdit"
				>
					<block v-for="(item, index) in resultNodes" :key="index">
						<block v-if="item.node === 'element'">
							<block v-if="item.tag === 'span'">
								<block
									v-for="(node, no) in item.nodes"
									:key="no"
								>
									<text
										v-if="node.node === 'text'"
										class="line-font"
										@tap.stop="clickInfo(node.text)"
										>{{ node.text }}</text
									>
								</block>
							</block>
							<block v-if="item.tag === 'br'"
								><text>\n</text></block
							>
						</block>
						<block v-if="item.node === 'text'">{{
							item.text
						}}</block>
					</block>
				</text>
				<textarea
					v-if="showTextInput"
					placeholder-class="f28"
					placeholder-style="color:#979797"
					:placeholder="placeholder + itemData.placeholder"
					:class="{ active: changeFocus }"
					@focus="changeSize(1)"
					@blur="changeSize(2)"
					v-model="inputText"
					:adjust-position="true"
					:maxlength="-1"
					:auto-height="true"
					:focus="autoFocus"
					disable-default-padding="false"
					cursor-spacing="20"
					@input="textInput"
				></textarea>
			</view>
			<view class="mt20"
				><diy-upload
					@emitsUrl="uploadImg($event)"
					:value="imageUrlList"
				></diy-upload
			></view>
			<view class="mt100 pb40">
				<reportRecord
					@upload="uploadRecord"
					:audio-url="itemData.voiceList"
					@delete="deleteRecord"
					:show-btn="inputType === 1"
					:show-text="false"
					:width="200"
				></reportRecord>
				<!-- <view class="tc rel" v-if="inputType === 2"><button class="press-button" @tap="inputContent">填入文字模板</button></view>
				<view class="tc pt20 pb20" @tap="changeInputType">{{ inputType === 1 ? '切换文字输入' : '切换语音输入' }}</view> -->
			</view>
		</view>
		<!--弹窗输入标签-->
		<uni-popup ref="inputDialog" type="dialog" catchtouchmove="true">
			<uni-popup-dialog
				ref="inputClose"
				mode="input"
				title="输入标签名称"
				placeholder="输入标签,不能超过4个字"
				@confirm="tagInputConfirm"
				@close="closeInputPopup()"
			>
				<view class="textareaInput"
					><uni-easyinput
						type="textarea"
						v-model="tagInput"
						placeholder="输入标签"
						placeholder-style="font-size:32rpx;"
						@input="tagInputCheck"
				/></view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
import diyUpload from '@/subPackagesLog/components/diy-upload/diy-upload.vue'
import reportRecord from '@/subPackagesLog/components/reportRecord/reportRecord.vue'
import scheduleBtn from '@/subPackagesLog/pages/workLog/components/scheduleBtn.vue'
import HtmlToJson from '@/common/libs/html2json.js'
import { handleFormatDayjs } from '@/common/date'
import deleteIcon from '@/static/img/delete.png'
import plusImg from '@/static/img/plus.png'
export default {
	options: {
		styleIsolation: 'shared',
	},
	emits: [
		'focus',
		'input',
		'upload',
		'record',
		'choose',
		'tagAdd',
		'tagDelete',
		'deleteImg',
	],
	components: {
		diyUpload,
		reportRecord,
		scheduleBtn,
	},
	props: {
		localData: {
			type: Object,
			default() {
				return {}
			},
		},
		dataIndex: [Number, String],
		startHandler: {
			type: Function,
			default() {
				return (node) => {
					node.attr.class = null
					node.attr.style = null
				}
			},
		},
		endHandler: {
			type: Function,
			default: null,
		},
		imageProp: {
			type: Object,
			default() {
				return {
					mode: 'aspectFit',
					padding: 0,
					lazyLoad: false,
					domain: '',
				}
			},
		},
		dailyId: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			deleteIcon,
			inputType: 1, //1语音输入，2文字输入
			imageUrl: [],
			changeFocus: 0,
			plusImg,
			inputText: '',
			recognitionText: '',
			recognitionList: [],
			itemData: {},
			imageUrlList: [],
			autoHeight: false,
			placeholder: '请输入内容，例如：\n',
			tagInput: '',
			showTextInput: false,
			resultNodes: [],
			autoFocus: false,
			editorCtx: null,
		}
	},
	mounted() {
		this.itemData = this.localData
		console.log(this.itemData)
		this.imageUrlList = this.itemData.mediaUrl
		this.inputText = this.localData.content
		if (this.inputText) {
			this.showTextInput = false
			// this.recognitionContent()
		} else {
			this.showTextInput = true
		}
	},
	methods: {
		//文字输入
		textInput(event) {
			// this.$emit('input', this.inputText)
			this.inputText = event.detail.value
		},
		//切换输入方式
		changeInputType() {
			this.inputType = this.inputType === 1 ? 2 : 1
		},
		//上传图片
		uploadImg(data) {
			this.imageUrl = []
			if (data && data.length > 0) {
				this.imageUrl = data.map((item) => {
					return item.url
				})
			} else {
				this.imageUrl = []
			}

			this.$emit('upload', {
				imageUrl: this.imageUrl,
				uploadNum:
					(data[data.length - 1] &&
						data[data.length - 1].uploadNum) ||
					0,
			})
		},
		//删除图片
		deleteImg() {
			this.$emit('deleteImg')
		},
		//上传语音
		uploadRecord(data) {
			this.$emit('record', data)
		},
		//删除语音
		deleteRecord(data) {
			this.$emit('delete', data)
		},
		//填入文字
		inputContent() {
			this.$emit('input', this.itemData.placeholder)
		},
		//增加输入框高度
		changeSize(type) {
			this.changeFocus = type === 1 ? 1 : 0
			if (type === 1) {
				this.autoFocus = true
				this.autoHeight = false
				this.$emit('focus')
			}
			if (type === 2) {
				this.autoFocus = false
				if (this.inputText) {
					this.autoHeight = true
					this.showTextInput = false
					// this.recognitionContent()
				} else {
					this.autoHeight = false
					this.showTextInput = true
				}
				this.$emit('input', this.inputText)
			}
		},
		//选择标签
		chooseTag(tag) {
			this.$emit('choose', tag)
		},
		//弹窗显示标签输入框
		showInputPopup() {
			this.tagInput = ''
			this.$refs.inputClose.val = ''
			this.$refs.inputDialog.open()
		},
		closeInputPopup() {
			this.$refs.inputDialog.close()
		},
		//输入框输入去空格
		tagInputCheck(event) {
			let val = event
			if (val.length > 4) {
				uni.showToast({
					title: '不能超过4个字',
					icon: 'none',
				})
				this.tagInput = val.substr(0, 4)
				return
			}
			let judgeFn = new RegExp(/\s+/g)
			if (judgeFn.test(val)) {
				uni.showToast({
					title: '不能输入空格',
					icon: 'none',
				})
				setTimeout(() => {
					this.tagInput = val.replace(/\s*/g, '')
				}, 300)
			} else {
				this.tagInput = val
			}
		},
		trimAll(ele) {
			if (typeof ele === 'string') {
				return ele.split(/[\t\r\f\n\s]*/g).join('')
			} else {
				console.error(
					`${typeof ele} is not the expected type, but the string type is expected`
				)
			}
		},
		//确认提交保存自定义标签
		tagInputConfirm(val) {
			this.$emit('tagAdd', this.tagInput)
		},
		//删除自定义标签
		deleteTag(tag) {
			this.$emit('tagDelete', tag)
		},
		//匹配识别文字
		recognitionContent() {
			let _that = this
			this.$request
				.request('carer-platform/content/handle/content', {
					method: 'post',
					data: {
						content: this.inputText,
					},
				})
				.then((res) => {
					if (res.success) {
						let data = res.data || ''
						if (data) {
							_that.recognitionText = data
								.split('\n')
								.join('<br/>')
							_that.showTextInput = false
							const results = HtmlToJson(
								_that.recognitionText,
								_that.startHandler,
								_that.endHandler,
								this
							)
							_that.resultNodes = results.nodes
						} else {
							_that.showTextInput = true
						}
					}
				})
		},
		//点击标蓝文字
		clickInfo(text) {
			let date = new Date().getTime()
			console.log(this.dailyId)
			uni.navigateTo({
				url:
					'/subPackagesLog/pages/workLog/schedule/create?date=' +
					date +
					'&type=1&text=' +
					text +
					'&dailyId=' +
					this.dailyId +
					'&journalDetailId=' +
					this.itemData.id,
			})
		},
		//点击转编辑
		clickToEdit() {
			this.showTextInput = true
			this.changeSize(1)
		},
		//点击文字域
		clickText() {
			this.$emit('focus')
		},
	},
	watch: {
		localData(val) {
			this.itemData = val
			this.imageUrlList = val.mediaUrl
			this.inputText = val.content
			this.autoFocus = false
			if (this.inputText) {
				this.showTextInput = false
				this.recognitionContent()
			} else {
				this.showTextInput = true
			}
		},
	},
}
</script>

<style scoped lang="scss">
.phcolor {
	color: red;
}
.textareaInput {
	width: 100%;
	/deep/ textarea {
		font-size: 28rpx;
		height: 40rpx;
		line-height: 40rpx;
		min-height: 40rpx;
	}
}
textarea {
	width: auto;
	min-height: 200rpx;
	border: none;
	word-wrap: break-word;
	white-space: pre-line;
	max-height: 100vh;
	&.active {
		min-height: 400rpx;
	}
	font-size: 28rpx;
}
.input-bg {
	background-color: #eeeeee;
	border-radius: 10rpx;
}
.text-line {
	text-decoration: underline;
}
.press-button {
	height: 68rpx;
	line-height: 68rpx;
	text-align: center;
	background-color: $back-color;
	border-radius: 40rpx;
	font-size: 32rpx;
	border: 1rpx solid #3a9bff;
	color: $active-color;
	width: 50%;
}
.press-button::after {
	border: none !important;
}

.press-button[disabled]:not([type]) {
	color: #999999;
	background-color: #dcdff0;
}
.tag-view {
	border: 2rpx $tag-color solid;
	border-radius: 10rpx;
	text-align: center;
	height: 54rpx;
	line-height: 54rpx;
	padding: 0 10rpx;
	color: $tag-color;
	font-size: 28rpx;
}
.tag-add {
	border: 2rpx $active-color solid;
	border-radius: 10rpx;
	text-align: center;
	height: 54rpx;
	line-height: 54rpx;
	padding: 0 10rpx;
	color: #ffffff;
	background-color: $active-color;
	font-size: 28rpx;
}
.tag-view-active {
	border: 2rpx $active-color solid;
	color: $active-color;
	background-color: #f1f8ff;
}
.tag-delete {
	position: absolute;
	right: -20rpx;
	top: -20rpx;
	z-index: 3;
	width: 40rpx;
	height: 40rpx;
}
.line-font {
	color: $active-color;
	text-decoration: underline;
}
.text-area {
	min-height: 300rpx;
	display: block;
}
.br:first-child {
	height: 0;
}
.br {
	height: 48rpx;
}
.dis-block {
	display: block;
}
.del-img {
	width: 34rpx;
	height: 34rpx;
}
/deep/.vue-ref {
	padding-bottom: 200rpx !important;
}
</style>
